<template>
  <view class="preson-item">
    <PresonItemCommonStyles :data="data" @click="handleShowActionSheet">
      <template #rightTop>
        <view v-if="data?.signStatus === SignStatusEnum.YES_SIGN" class="signed-in">已签到</view>
        <view v-if="data?.approvalStatus === ApprovalStatusEnum.CANCEL" class="cancel">已取消</view>
        <view v-if="data?.approvalStatus === ApprovalStatusEnum.CANCELING" class="canceling">
          待审核
        </view>
        <view v-if="data?.approvalStatus === ApprovalStatusEnum.REJECT" class="reject">已驳回</view>
      </template>
      <template #timeTitle>
        <text class="time-name">{{ time.title }}</text>
      </template>
      <template #timeValue>
        <text class="time-value">{{ time.value }}</text>
      </template>
      <template #btns>
        <view
          class="btns"
          v-if="
            (data?.isAuditAuth === IsAuditAuthEnum.YES &&
              data?.approvalStatus === ApprovalStatusEnum.UNDERREVIEW) ||
            data?.approvalStatus === ApprovalStatusEnum.CANCELING
          "
        >
          <view class="call" @click="makePhoneCall">联系TA</view>
          <view class="examine" @click.stop="emits('click')">审核</view>
        </view>
      </template>
    </PresonItemCommonStyles>

    <ShowModal
      v-model="modalVisible"
      title="取消报名"
      content-width="100%"
      cancel-text="暂不取消"
      confirm-text="申请取消"
      confirm-color="#EA5E0E"
      :confirm-auto-close="false"
      :z-index="999"
      @confirm="handleCancelRegister"
    >
      <template #content>
        <view class="pa-20" style="width: 100%">
          <view class="fz-14 mb-16" style="color: #969799">
            <text>取消后，如有支付的活动费用将原路退回。</text>
          </view>
          <view style="background-color: #f2f3f5">
            <UniEasyinput v-model="cancelRemark" type="textarea" placeholder="请说明取消报名原因" />
          </view>
        </view>
      </template>
    </ShowModal>

    <ActionSheet
      v-model="showActionSheet"
      :itemList="actionSheetitemList"
      @change="handleShowActionSheetChange"
    ></ActionSheet>
  </view>
</template>
<script setup lang="ts">
  import { computed, ref, type PropType, watch } from 'vue';
  import type { IActivityRegister } from '@/api/activity/types';
  import {
    SignStatusEnum,
    IsAuditAuthEnum,
    ApprovalStatusEnum,
    ActivityTypeEnum,
  } from '@/enums/activityStatusEnum';
  import { navigateTo } from '@/router';
  import ActionSheet, { type ActionSheetItem } from '@/components/ActionSheet/index.vue';
  import { Toast } from '@/utils';
  import { activityManagerCancelSysRegistration } from '@/api/activity';
  import ShowModal from '@/components/ShowModal/index.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import dayjs from 'dayjs';
  import PresonItemCommonStyles from './PresonItemCommonStyles.vue';

  const props = defineProps({
    data: {
      type: Object as PropType<IActivityRegister>,
    },
    currentTab: {
      type: Number,
      default: 0,
    },
    activityType: String as PropType<ActivityTypeEnum>,
  });

  const emits = defineEmits(['click', 'refresh', 'showPrinterPopup']);

  const showActionSheet = ref(false);
  const actionSheetitemList = ref<ActionSheetItem[]>();

  watch(
    () => props.data,
    (val) => {
      actionSheetitemList.value = [
        {
          text: '查看报名详情',
        },
        {
          text: '联系ta',
        },
        {
          text: '代签到并打印胸卡',
          show:
            props.data?.approvalStatus === ApprovalStatusEnum.PASSED &&
            props.data.signStatus === SignStatusEnum.NO_SIGN &&
            props.activityType === ActivityTypeEnum.oneself,
        },
        {
          text: '打印胸卡',
          show:
            props.data?.approvalStatus === ApprovalStatusEnum.PASSED &&
            props.activityType === ActivityTypeEnum.oneself,
        },
        {
          text: '取消报名',
          show:
            props.data?.approvalStatus === ApprovalStatusEnum.PASSED &&
            props.data.signStatus === SignStatusEnum.NO_SIGN,
        },
      ];
    },
    {
      deep: true,
      immediate: true,
    },
  );

  function handleShowActionSheetChange(index: number) {
    switch (index) {
      case 0:
        toRegisterDetail();
        break;
      case 1:
        // 联系ta
        makePhoneCall();
        break;
      case 2:
        // 代签到
        navigateTo({
          name: 'signedOnBehalfOf',
          options: {
            success: () => emits('refresh'),
            activityId: props.data?.activityId!,
            registerId: props.data?.id!,
          },
        });
        break;
      case 3:
        // 打印胸卡
        emits('showPrinterPopup');
        break;
      case 4:
        modalVisible.value = true;
        break;
    }
  }

  function handleShowActionSheet(data: IActivityRegister) {
    if (data?.approvalStatus === ApprovalStatusEnum.UNDERREVIEW) return;
    showActionSheet.value = true;
  }

  function makePhoneCall() {
    if (props.data?.personTel) {
      wx.makePhoneCall({
        phoneNumber: props.data?.personTel,
      });
    } else {
      Toast('暂无联系方式');
    }
  }

  const modalVisible = ref(false);
  const cancelRemark = ref<string>('');
  /** 取消报名 */
  function handleCancelRegister() {
    if (!cancelRemark.value) return Toast('请说明取消报名原因');
    activityManagerCancelSysRegistration({
      registerId: props.data?.id as number,
      remarks: cancelRemark.value,
    })
      .then(() => {
        Toast('取消报名成功');
        emits('refresh');
      })
      .finally(() => (modalVisible.value = false));
  }

  function toRegisterDetail() {
    navigateTo({
      name: 'activityManageRegisterDetail',
      options: {
        registerId: props.data?.id as number,
        callback: () => emits('refresh'),
      },
    });
  }

  const time = computed(() => {
    if ([0, 2].includes(props.currentTab)) {
      return {
        title: '通过时间：',
        value: dayjs(props.data?.passTime).format('MM-DD HH:mm'),
      };
    }
    if (props.currentTab === 1)
      return {
        title: '签到时间：',
        value: dayjs(props.data?.signTime).format('MM-DD HH:mm'),
      };
    if (props.currentTab === 3) {
      if (props.data?.approvalStatus === ApprovalStatusEnum.CANCEL) {
        return {
          title: '申请取消时间：',
          value: dayjs(props.data?.cancelTime).format('MM-DD HH:mm'),
        };
      }
      if (props.data?.approvalStatus === ApprovalStatusEnum.REJECT) {
        return {
          title: '驳回时间：',
          value: dayjs(props.data?.verifyTime).format('MM-DD HH:mm'),
        };
      }
    }
    return {};
  });
</script>
<style lang="scss" scoped>
  .preson-item {
    .signed-in,
    .cancel,
    .canceling,
    .reject {
      padding: 2rpx 8rpx;
      border-radius: 2px;
      font-size: 20rpx;
      font-weight: 400;
      line-height: 28rpx;
      border-radius: 2px;
      white-space: nowrap;
    }
    .reject {
      background-color: #fff4e7;
      color: #ea5e0e;
    }

    .signed-in {
      color: #2878ff;
      border: 1rpx solid #2878ff;
    }
    .cancel {
      background: #f2f3f5;
      color: #333;
    }
    .canceling {
      background: #d0f7ff;
      color: #2878ff;
    }
  }
</style>
